<h1 mat-dialog-title>新增角色
        <a (click)="addRoleList()" style="cursor: default">
            <i class="material-icons">add_circle</i>
        </a>
    </h1>
    <div mat-dialog-content>
        <form [formGroup]="addRoleForm">
            <div formArrayName="containLists">
                <div *ngFor="let containList of addRoleForm.get('containLists')['controls']; let i =index">
                    <div>
                        <span>Role {{i + 1}}</span>
                        <span *ngIf="addRoleForm.get('containLists')['controls'].length > 1" (click)="removeRoleList(i)">
                            <i class="material-icons">cancel</i>
                        </span>
                    </div>
                    <!-- Angular assigns array index as group name by default 0, 1, 2, ... -->
                    <div [formGroupName]="i">
                        <character-create-unit [group]="addRoleForm.get('containLists')['controls'][i]" [roleList]="roleList"></character-create-unit>
                    </div>
                </div>
            </div>
            <div class="margin-20">
                <a (click)="addRoleList()" style="cursor: default">
                    <i class="material-icons">add_circle</i>
                </a>
            </div>
        </form>
    </div>
    <div mat-dialog-actions>
         <button mat-raised-button color="primary" (click)="onNoClick()">取消</button>
        <button mat-raised-button color="primary" (click)="onYesClick(addRoleForm.value.containLists)" [disabled]="!addRoleForm.valid">確定新增</button>
    </div>